<script setup>
import { ref } from 'vue';

const switchState = ref(false);
const darkModeEnabled = ref(false);
const notificationSetting = ref(true);
</script>

<template>
  <div class="container mx-auto p-8">
    <h1 class="mb-6 text-2xl font-bold">Switch Component</h1>

    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Basic Switch</h3>
        <div class="flex flex-col space-y-4">
          <div class="flex items-center gap-2">
            <Switch v-model="switchState" />
            <span>Toggle me</span>
          </div>
          <div>Switch state: {{ switchState }}</div>

          <div class="flex items-center gap-2">
            <Switch disabled />
            <span>Disabled (off)</span>
          </div>

          <div class="flex items-center gap-2">
            <Switch disabled checked />
            <span>Disabled (on)</span>
          </div>

          <div class="flex items-center gap-2">
            <Button @click="switchState = !switchState">
              Toggle Switch Programmatically
            </Button>
          </div>
        </div>
      </div>

      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Switch with Values</h3>
        <div class="flex flex-col space-y-4">
          <div class="flex items-center gap-2">
            <Switch v-model="darkModeEnabled">
              <span class="ml-2">
                {{ darkModeEnabled ? '🌙 Dark Mode' : '☀️ Light Mode' }}
              </span>
            </Switch>
          </div>

          <div class="mt-4">
            <p>Custom value binding:</p>
            <div class="mt-2 flex items-center gap-2">
              <Switch v-model="notificationSetting" />
              <span>
                Notifications:
                {{ notificationSetting ? 'Enabled' : 'Disabled' }}
              </span>
            </div>
            <div class="mt-2">
              <Button
                size="small"
                @click="notificationSetting = !notificationSetting"
              >
                Toggle Notifications
              </Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
